import {messages} from "share/common";
import React from 'react';
import {connect} from 'react-redux';
import {Popover, Tabs} from 'antd';
import ReportDistributionService from "containers/data-center/report-distribution/report-distribution.service";
import ResizeTable from 'components/resize-table'
import 'styles/data-center/report-distribution/permission-detail/data-permission-viewer.scss';

const {TabPane} = Tabs;

class DataPermissionViewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      permissionCodesArr: [],
      permissionData: [],
      columns: [
        {
          title: '序号',
          dataIndex: "_index",
          render: value => <Popover placement="topLeft" content={value}>{value}</Popover>
        },
        {
          title: messages('data-center.key56')/*名称*/,
          dataIndex: "permissionDesc",
          render: value => <Popover placement="topLeft" content={value}>{value}</Popover>
        }
      ]
    };
  }

  componentDidMount() {
    this.getPermissionList()
  }

  getPermissionList = () => {
    ReportDistributionService.getPermissionList()
      .then(data => {
        this.setState({
          permissionCodesArr: data
        })
      })
  }

  //分页点击
  onChangePager = (pagination, filters, sorter) => {
  };
  renderTableByKey = (permission_prop) => {
    let data = this.props.permissionData.filter(item => item.permissionProp === permission_prop);
    data.map((item, index) => item._index = index + 1);
    let {columns} = this.state;
    return (<div key={permission_prop}>
      <ResizeTable
        rowKey={(record, index) => index}
        columns={columns}
        dataSource={data}
        pagination={null}
        onChange={this.onChangePager}
        size="middle"
        bordered
      />
    </div>)
  }
  getWillShowTabs = (permissionCodesArr) => {
    //只有这些才需要被显示到tabs
    let showTableArr = ['sob', 'le', 'company', 'dept', 'dept_full', 'costitem'];
    let {permissionData} = this.props;
    return permissionCodesArr.filter(item => (showTableArr.indexOf(item.permission_prop) > -1 && codeInPermissionData(item.permission_prop, permissionData)));
    function codeInPermissionData(code, permissionData) {
      for (let i = 0; i < permissionData.length; i++) {
        if (permissionData[i].permissionProp === code) {
          return true;
        }
      }
    }
  }
  render() {
    let {permissionCodesArr} = this.state;
    let _permissionCodesArr = this.getWillShowTabs(permissionCodesArr);
    return (
      <div className="data-permission-viewer">
        {_permissionCodesArr.length ? <div>
          <div className="field-title">
            {messages('data-center.key36')/*权限详情*/}
          </div>
          <div>
            <Tabs defaultActiveKey={_permissionCodesArr[0].permission_prop}>
              {_permissionCodesArr.map(item => {
                return (<TabPane tab={item.permission_desc} key={item.permission_prop}>
                  {this.renderTableByKey(item.permission_prop)}
                </TabPane>)
              })}
            </Tabs>
          </div>
        </div> : ""}
      </div>
    );
  }
}

DataPermissionViewer.propTypes = {
  permissionData: React.PropTypes.any,//数据权限
};

DataPermissionViewer.defaultProps = {
  permissionData: []
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
    user: state.login.user,
    tenantMode: state.main.tenantMode,
    company: state.login.company,
  }
}

export default connect(mapStateToProps)(DataPermissionViewer);



